<template>
	<view>
		<star-nav :type="3" title="卡券中心" icon="/static/icon-images/rocket.png"></star-nav>
		<view class="content">

			<view class="tabs">
				<view class="tab" v-for="(item,index) in navList" :key="item.id"
					:class="navCurrent==item.id?'active':''" @click="navChange(item.id)">
					{{item.tab}}
				</view>
			</view>

			<vip class="mt-20" @cardLock="cardLock" ref="vipRef" @Activate="handleActivate" @ZZ="handleZZ"></vip>
			
		</view>
		<star-sure :show.sync="sureShow" :title="title" :text="text" @confirm="onConfirm"></star-sure>
		<giftPopupvip :vipTitleObj="vipTitleObj" :show="giftPopupShow" @success="handleGiftPopup" />
	</view>
</template>

<script>
	import {
		activate
	} from '@/api/my.js'
	import giftPopupvip from '../my/components/giftPopupVip/index.vue'
	import vip from './components/vip/index.vue'
	export default {
		components: {
			vip,
			giftPopupvip
		},
		data() {
			return {
				navCurrent: 0,
				navList: [{
					tab: '初级卡',
					id: 0
				}, {
					tab: '高级卡',
					id: 1
				}],
				vipTitleObj: {},
				sureShow: false,
				title: '激活卡券',
				text: '确认激活此卡券？',
				giftPopupShow: false,
				vipCardId: null
			}
		},
		onLoad() {
			setTimeout(() => {
				this.getVipList()
			}, 500)
		},
		methods: {
			navChange(id) {
				if(id==0){
					this.$refs.vipRef.getList(0)
				}
				if(id==1){
					this.$refs.vipRef.getList(1)
				}
				this.navCurrent = id
			},
			// 锁卡
			cardLock(item){
				console.log('item:',item);
			},
			getVipList() {
				this.$refs.vipRef.getList(0)
			},
			handleGiftPopup() {
				this.giftPopupShow = false
				this.$refs.vipRef.getList()
			},
			// 转赠
			handleZZ(item) {
				this.vipTitleObj = item
				this.giftPopupShow = true
			},
			// 激活
			handleActivate(item) {
				// console.log('item:',item);
				this.vipCardId = item.vipCardId
				this.sureShow = true
			},
			async onConfirm() {
				let data = {
					vipCardId: this.vipCardId
				}
				let res = await activate(data)
				this.$refs.vipRef.getList()
				uni.showToast({
					title: '激活成功',
					icon: 'none'
				})
				this.$refs.vipRef.getList(0)
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100vh;
		background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	}

	.content {
		padding: 20rpx;
	}

	.mt-20 {
		margin-top: 20rpx;
	}

	.tabs {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.tab {
		border-radius: 9999px;
		white-space: nowrap;
		background-color: #374151;
		color: #d1d5db;
		padding: 10rpx 24rpx;
		font-weight: 500;
		--tw-text-opacity: 1;
	}

	.active {
		color: #fff;
		background-color: #3b82f6;
	}
</style>